<template>
  <div class="locationView">
    <div class="viewLeft">
      <div class="title">库区选择</div>
      <el-select slot="prepend" v-model="selectId" :filterable="true" placeholder="请选择" @change="changeWare">
        <el-option v-for="item in warehouseList" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <div class="areaCount">
        <el-input v-model="input" placeholder="请输入" suffix-icon="el-icon-search" />
        <div v-for="item in allAreaList" :key="item.id" :class="['item',isActive===item.id?'activeColor': '']" @click="choseAreaId(item.id)">{{ item.name }}</div>
      </div>
    </div>
    <div class="viewRight">
      <div class="total">
        <div class="all">
          <p>库区总览</p>
          <span>
            库存总计:<i>{{ overviewInfo.total }}</i>
          </span>
        </div>
        <div class="item">
          <div class="icon" />
          <p>停用库位:</p>
          <i>{{ overviewInfo.stop }}</i>
        </div>
        <div class="item">
          <div class="icon green" />
          <p>占用库位:</p>
          <i>{{ overviewInfo.use }}</i>
        </div>
        <div class="item">
          <div class="icon easyGreen" />
          <p>空闲库位:</p>
          <i>{{ overviewInfo.free }}</i>
        </div>
      </div>
      <div class="styleActive">
        <div v-for="item in allDetailList" :key="item.id" :class="['styleItem',item.useStatus===0? '' : 'green']">
          <div class="info">
            <div class="indoItem">
              库位编号: <i>{{ item.areaCode }}</i>
            </div>
            <div class="indoItem">
              库位名称: <i>{{ item.name }}</i>
            </div>
            <div class="indoItem">
              库位位置: <i>{{ item.locationRow }}排{{ item.locationColumn }}列{{ item.locationLayer }}层</i>
            </div>
            <div class="indoItem">
              库位状态: <i>{{ userStatus[item.useStatus] }}</i>
            </div>
            <div class="indoItem">
              货品名称: <i>{{ item.goodsName || '未知' }}</i>
            </div>
            <div class="indoItem">
              库位数量: <i>{{ item.goodsTotal || '0' }}</i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { searchAllWarehouseAPI, searchAllAreaPAI, allOverviewAPI, allListDetailAPI } from '@/api'
export default {
  name: 'LocationView',
  data() {
    return {
      selectId: '',
      input: '',
      isActive: '',
      // 库区数据id
      areaId: '',
      // 查询全部仓库参数
      warehouseParams: {
        status: 1
      },
      //  查询全部仓库数据回显
      warehouseList: [],
      // 查询全部库区数据回显
      allAreaList: [],
      // 查询库区总览数据回显
      overviewInfo: {},
      // 全部库位详细信息回显
      allDetailList: [],
      // 空闲状态\
      userStatus: {
        0: '空闲',
        1: '未满',
        2: '已满'
      }
    }
  },
  created() {
    this.fetchSearchAllWarehouse() // 查询全部仓库
  },
  methods: {
    async fetchSearchAllWarehouse() {
      const res = await searchAllWarehouseAPI(this.warehouseParams)
      // console.log(res.data)
      this.warehouseList = res.data
      this.selectId = res.data[0].id
      this.fetchSearchAllArea() // 查询全部库区
    },
    // 查询全部库区
    async fetchSearchAllArea() {
      const res = await searchAllAreaPAI({
        warehouseId: this.selectId,
        ...this.warehouseParams
      })
      this.allAreaList = res.data
      this.areaId = res.data[0].id
      this.fetchAllOverview(this.areaId) // 查询库区总览
    },
    // 查询库区总览
    async fetchAllOverview(value) {
      const res = await allOverviewAPI(value)
      this.overviewInfo = res.data
      this.fetchAllListDetail(this.areaId) // 查询全部库位详细信息
    },
    // 查询全部库位详细信息
    async fetchAllListDetail(value) {
      const res = await allListDetailAPI({
        areaId: value
      })
      this.allDetailList = res.data
    },
    choseAreaId(id) {
      this.isActive = id
      this.fetchAllOverview(id)
    },
    //
    changeWare() {
      console.log(this.selectId)
      this.fetchSearchAllArea(this.selectId)
    }
  }
}
</script>

<style lang="scss" scoped>
.locationView {
  display: flex;
  height: 100vh;
  background-color: #fff;
  .viewLeft {
    width: 263px;
    padding: 27px 19px 27px 20px;
    border-radius: 10px 0 0 10px;
    box-shadow: 1px 1px 5px #ccc;
    overflow: hidden;
    .title {
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #332929;
      margin: 0 0 20px 10px;
    }
    .el-select {
      width: 224px;
      height: 40px;
      margin-bottom: 20px;
    }
    .areaCount {
      width: 224px;
      background: #fdfcf9;
      border: 1px solid #f7f2f1;
      border-radius: 6px;
      padding: 30px 29px 0 26px;
      height: 83vh;
      overflow-y: scroll;
      .el-input {
        margin-bottom: 15px;
      }
      .item {
        width: 150px;
        height: 40px;
        background: #fff;
        border-radius: 4px;
        box-shadow: 0 0 6px 0 rgb(255 178 0 / 40%);
        margin: 0 auto;
        margin-top: 20px;
        font-size: 13px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: center;
        color: #ffb200;
        line-height: 40px;
        cursor: pointer;
      }
      .activeColor{
        background-color: #ffb200;
        color: #332929;
      }
    }
  }
  .viewRight {
    flex: 1;
    padding: 27px 19px 27px 20px;
    border-radius: 0px 10px 10px 0;
    box-shadow: 1px 1px 5px #ccc;
    .total {
      display: flex;
      .all {
        display: flex;
        width: 300px;
        justify-content: space-between;
        align-items: center;
        p {
          width: 64px;
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          color: #332929;
          line-height: 22px;
        }
        span {
          margin-right: 4px;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          color: #424250;
          i {
            margin-left: 10px;
          }
        }
      }
      .item {
        display: flex;
        justify-content: start;
        align-items: center;
        margin-left: 30px;
        .icon {
          background-color: rgb(195, 195, 195);
          width: 12px;
          height: 12px;
          border-radius: 3px;
        }
        p {
          height: 22px;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          color: #332929;
          line-height: 22px;
          margin-left: 5px;
        }
        i {
          width: 64px;
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          color: #332929;
          line-height: 22px;
          margin-left: 10px;
        }
        .green {
          background-color: rgb(0, 190, 118);
        }
        .easyGreen {
          background-color: rgb(178, 220, 204);
        }
      }
    }
    .styleActive {
      display: flex;
      margin-top: 20px;
      .styleItem {
        width: 36px;
        height: 36px;
        border-radius: 7px;
        background-color: #b2dccc;
        margin-left: 10px;
        position: relative;
        .info {
          position: absolute;
          display: none;
          background-color: #fff;
          width: 200px;
          height: 240px;
          border-radius: 7px;
          box-shadow: 1px 1px 5px #ccc;
          top: 60px;
          left: 50%;
          margin-left: -90px;
          font-size: 14px;
          padding: 0 30px;
          .indoItem {
            margin-top: 20px;
            color: #ccc;
            i {
              color: #332929;
              font-size: 12px;
            }
          }
        }
        &:hover .info {
          display: block;
        }
      }
      .gray {
        background-color: rgb(195, 195, 195);
      }
      .green {
        background-color: rgb(0, 190, 118);
      }
    }
  }
}
::v-deep .el-input__inner {
  height: 40px;
  background-color: #f8f5f5;
}
</style>
